<script lang="ts" setup>
  import { fetchFieldCfgList } from '@/api/dictConfig'
  import { defaultSearchOptions } from '@/constant/index'
  import { updateFieldCfg } from '@/api/dictConfig'
  interface DialogProps {
    visible: boolean
    typeCode: string
  }

  const $baseMessage = inject('$baseMessage')

  const props = withDefaults(defineProps<DialogProps>(), {
    visible: false, // 是否展示
    typeCode: '', // 业务场景编码
  })
  const renderData = ref([])
  const emits = defineEmits(['update:visible', 'save'])

  const handleClose = () => {
    emits('update:visible', false)
  }

  const handleSave = async () => {
    try {
      const data = JSON.parse(JSON.stringify(renderData.value))
      data &&
        data.map((item) => {
          if (!item.userId) {
            delete item.userId
          }
          if (item.data) {
            delete item.data
          }
        })
      const { msg } = await updateFieldCfg(renderData.value)
      $baseMessage(msg, 'success', 'vab-hey-message-success')
      emits('update:visible', false)
      emits('save')
    } catch (e) {
      console.error(e)
    }
  }

  const getRenderConfig = async () => {
    try {
      const { data } = await fetchFieldCfgList({
        typeCode: props.typeCode,
        develop: 1,
      })
      if (data && data.length) {
        const newData = data.filter((item) => item.defaultField !== 1) // 过滤默认字段
        renderData.value = newData || []
      }
    } catch (e) {
      console.error(e)
    }
  }

  onMounted(() => {
    getRenderConfig()
  })
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="自定义配置"
    width="1200"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <el-alert
      title="自定义字段配置"
      type="warning"
      description="可根据个人需要进行字段的配置"
      show-icon
    />
    <el-table :data="renderData" border>
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column
        prop="defaultDisplayName"
        label="默认标题"
        width="100"
        header-align="center"
        align="center"
      />
      <el-table-column
        label="标题"
        width="140"
        header-align="center"
        align="center"
      >
        <template #default="scope">
          <el-input v-model="scope.row.displayName" clearable />
        </template>
      </el-table-column>
      <el-table-column
        label="列表显示宽度"
        width="160"
        header-align="center"
        align="center"
      >
        <template #default="scope">
          <el-input-number
            v-model="scope.row.width"
            :controls="false"
            style="width: 120px"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="查询条件"
        width="200"
        header-align="center"
        align="center"
      >
        <template #default="scope">
          <el-select v-model="scope.row.searchCondition">
            <el-option
              v-for="item in defaultSearchOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        label="是否在查询中展示"
        width="100"
        header-align="center"
        align="center"
      >
        <template #default="scope">
          <el-switch
            v-model="scope.row.onSearchCol"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="是否在列表中展示"
        width="100"
        header-align="center"
        align="center"
      >
        <template #default="scope">
          <el-switch
            v-model="scope.row.onDataCol"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="是否在表单展示"
        width="100"
        header-align="center"
        align="center"
      >
        <template #default="scope">
          <el-switch
            v-model="scope.row.onFormCol"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="sort"
        label="排序"
        width="140"
        header-align="center"
        align="center"
      >
        <template #default="scope">
          <el-input-number
            v-model="scope.row.sort"
            :controls="false"
            style="width: 100px"
          />
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <span>
        <el-button size="large" @click="handleClose">取消</el-button>
        <el-button size="large" type="primary" @click="handleSave">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
